<template>
  <div>
    <screen height="75px" >
      <div class="screen">
        <el-select v-model="value" filterable placeholder="请选择充电桩">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <div class="btn">
          <btn>
            <el-button @click="monthQuery">查询</el-button>
            <el-button @click="monthReset">重置</el-button>
          </btn>
        </div>
        <div>
          <btn>
            <el-button @click="monthCycle">设置结账周期</el-button>
            <el-button @click="monthExport">导出excel</el-button>
          </btn>
        </div>
      </div>
    </screen>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="汇总" name="1">
          <monthSummaryTable ref="Summary" />
        </el-tab-pane>
        <el-tab-pane label="详情列表"  name="2">
          <monthDerailsTable  ref="Derails" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import screen from "@/components/screen";
import btn from "@/components/btn";
import monthDerailsTable from "./monthDerailsTable"
import monthSummaryTable from "./monthSummaryTable"
export default {
  components: {
    screen,
    btn,
    monthDerailsTable,
    monthSummaryTable,
  },
  data() {
    return {
      activeName:"2",
      options: [
        {
          value: "选项1",
          label: "充电桩1"
        },
        {
          value: "选项2",
          label: "充电桩2"
        },
        {
          value: "选项3",
          label: "充电桩3"
        },
        {
          value: "选项4",
          label: "充电桩4"
        },
        {
          value: "选项5",
          label: "充电桩5"
        }
      ]
    };
  },
  watch:{
    activeName(){
      this.$refs.Summary.isShow=false
      this.$refs.Derails.isShow=false
    }
  },
  methods:{
      monthQuery(){

      },
      monthReset(){

      },
      monthCycle(){
          if(this.activeName==1){
         this.$refs.Summary.time()

          }else{
              this.$refs.Derails.time()
          }
      },
      monthExport(){
          if(this.activeName==1){
              this.$refs.Summary.exportMonthSummaryTable()
          }else{
              this.$refs.Derails.exportMonthSummaryTable()

          }
      }
  }
};
</script>
<style scoped>
/deep/ .el-input__inner {
  border-radius: 0;
  height: 34px;
  line-height: 34px;
  vertical-align: middle;
  color: #fff;
}
.screen {
  display: flex;
/* margin-top: 4px; */
 align-items: center;
}

.el-select {
  margin-left: 30px;
}
.btn  div{
  margin:0 80px;
}
.block {
    text-align: center;
}
</style>